<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="地址管理"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-modal v-model="show" content="确认删除该地址吗" @confirm="cD"></u-modal>
    <view class="people">
      <view class="each" v-for="(p, pIndex) in locations" :key="pIndex">
        <view class="head">
          <view class="name">姓名：{{p.name}}</view>
          <view class="flex-center">
            <image style="margin-right: 10rpx;" class="img" src="/static/images/edit.svg" @click="doModify(p, pIndex)"></image>
            <image class="img" src="/static/images/delete.svg" @click="doDelete(pIndex)"></image>
            <view @click="setDefault(pIndex)" v-if="!p.isDefault" class="default-font" hover-class="none" hover-stop-propagation="false">
              设为默认地址
            </view>
            <view v-if="p.isDefault" class="defaultImg" hover-class="none" hover-stop-propagation="false">
              默认地址
            </view>
          </view>
        </view>
        <view class="cardno">电话：{{p.phone}}</view>
        <view class="cardno">地址：{{p.address}}</view>
      </view>

      <button class="submit" @click="doAdd">添加</button>
    </view>
  </view>
</template>

<script>
import { updateUser } from '../../api/system/api'
export default {
  data() {
    return {
      locations: [],
      userInfo: {},
      show: false
    };
  },
  onShow() {
    this.refreshData()
  },
  methods: {
    doAdd() {
      this.$u.route('/pages/interest/add')
    },
    refreshData() {
      uni.getStorage({     
        key:'userInfo',
        success: (res) => {
          this.userInfo = res.data;
          console.log(this.userInfo)
          this.locations = this.userInfo.location ? JSON.parse(this.userInfo.location) : []
        }
      })
    },
    doDelete(index) {
      this.curIndex = index;
      this.show = true;
    },
    cD() {
      this.locations.splice(this.curIndex, 1)
      let params = {
        ...this.userInfo,
        location: JSON.stringify(this.locations)
      };
      updateUser(params).then((up) => {
        uni.setStorage({
          key: "userInfo",
          data: params,
          success: () => {
            this.$refs.uToast.show({
              title: "删除成功",
              type: "",
            });
          },
        });
      });
    },
    doModify(data, index) {
      console.log(data)
			this.$u.route('/pages/interest/add', {
        data: JSON.stringify(data),
        index,
        type: 'edit'
			})
    },
    setDefault(index) {
      let location = this.locations.map(v => {
        return {
          ...v,
          isDefault: false
        }
      })
      location[index].isDefault = true;
      this.locations = location;
      this.locations = [...this.locations]
      updateUser({
        ...this.userInfo,
        location: JSON.stringify(location)
      }).then((res) => {
        uni.setStorage({
          key: "userInfo",
          data: {
            ...this.userInfo,
            location: JSON.stringify(location)
          },
          success: () => {
            this.$refs.uToast.show({
              title: "操作成功",
              type: "",
            });
          },
        });
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  padding: 2rpx;
}
.add {
  text-align: center;
  font-size: 30rpx;
  line-height: 120rpx;
}
.people {
  padding: 30rpx;
  background: #fff;
  width: calc(100% - 60rpx);
  margin: auto;
  border-radius: 20rpx;
  .img {
    width: 30rpx;
    height: 30rpx;
  }

  .each {
    padding: 20rpx 0 20rpx 30rpx;
    border-bottom: 1rpx solid #e4dada;
    position: relative;
    .head {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-weight: bold;
    }
    .cardno {
      margin-top: 10rpx;
    }
    .defaultImg {
      color: red;
      background: lightcoral;
      padding: 6rpx 12rpx;
      color: #fff;
      font-weight: 400;
      font-size: 16rpx;
      margin-left: 12rpx;
    }
  }

  .add {
    text-align: center;
    margin-top: 30rpx;
    width: 100%;
    font-weight: bold;
  }

  .check {
    position: absolute;
    left: -30rpx;
    top: 30rpx;
  }
}

.submit {
  margin: 60rpx 0 0;
  border: none;
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  box-sizing: border-box;
  border-radius: 15rpx;
  background-color: #5f88ff;
  color: #ffffff;

  &::after {
    content: none;
  }

  &::before {
    content: none;
  }

  &[disabled='true'] {
    background: #e4e4e4;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
.add {
  width: 40%;
  height: 60rpx;
  line-height: 60rpx;
  margin: 60rpx auto 0;
  background-color: #ff5757;
}
.default-font {
  font-size: 24rpx;
  margin-left: 12rpx;
}
</style>
